<template>
  <div class="data-analy-box">
    <div
      class="detail-box"
      :style="
        getUserLineDetailsAdd.length <= 3 ? { padding: '60px 10px' } : null
      "
      v-if="
        gisForm.routeAreaType == 5
          ? true
          : gisForm.userLineId != null && gisForm.userLineDetails != null
      "
    >
      <div v-for="(item, index) in getUserLineDetailsAdd" :key="index">
        <span>
          {{
            item == 'name' && userLineDetails
              ? userLineDetails[item]
              : userLineDetailsLabel[item] + ':'
          }}
        </span>
        <span
          :style="`
            color: ${
              false
                ? item.toString().indexOf('mobile') !== -1
                  ? '#92d050'
                  : item.toString().indexOf('unicom') !== -1
                  ? '#ff0000'
                  : item.toString().indexOf('telecom') !== -1
                  ? '#2e75b6'
                  : '#333'
                : '#333'
            };
          `"
          :title="
            userLineDetails && userLineDetails[item]
              ? userLineDetails[item]
              : null
          "
          @mousedown.stop
          @mouseup.stop
          v-show="item !== 'name' && userLineDetails && userLineDetails[item]"
        >
          {{
            userLineDetails && userLineDetails[item]
              ? userLineDetails[item]
              : null
          }}
          <!-- <el-input
            :readonly="true"
            size="mini"
            style="min-width:74px"
            :value=" userLineDetails[item] ? userLineDetails[item] :null "
          >

          </el-input> -->
        </span>
      </div>
    </div>

    <div class="line_chart" v-if="!getCloseCharts">
      <data-analysis></data-analysis>
    </div>
    <!-- <div class="close-icon" @click.stop="getCloseCharts = !getCloseCharts"><i :class="!getCloseCharts ? 'el-icon-arrow-left':'el-icon-arrow-right' " ></i></div> -->
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex'
const {
  mapState: mapStateForm,
  mapMutations: mapMutationsForm,
  mapActions: mapActionsForm
} = createNamespacedHelpers('gisForm')

import DataAnalysis from '../dataAnalysis'
import AkTable from '@/components/gisPageComponents/table'

export default {
  name: 'checkedDetails',
  components: { DataAnalysis, AkTable },
  props: {
    closeCharts: {}
  },
  computed: {
    ...mapState(['gisForm', 'home']),
    ...mapStateForm([
      'userLineDetailsLabel', //中文注解
      'userLineDetailsAdd', //详情列表展示顺序，
      'userLineDetails' // 详情列表
    ]),
    getUserLineDetailsAdd() {
      if (this.gisForm.userType > 3) {
        let userType = this.gisForm.userType
        if (userType == 4) {
          return [
            'mobileUserRatio',
            'unicomUserRatio',
            'telecomUserRatio',
            'mobileContrastRatio',
            'unicomContrastRatio',
            'telecomContrastRatio'
          ]
        }
        return [
          'mobileUserDifference',
          'unicomUserDifference',
          'telecomUserDifference'
        ]
      }
      return this.userLineDetailsAdd
        .filter(x => {
          if (
            x != 'mobileBelongRatio' &&
            x != 'unicomBelongRatio' &&
            x != 'telecomBelongRatio'
          ) {
            return x
          }
        })
        .filter(x => {
          if (!(this.home.userInfoVo.superAccount == 2 && x == 'numAll')) {
            return x
          }
        })
    },
    getCloseCharts: {
      get() {
        return this.closeCharts
      },
      set(e) {
        this.$emit('update:closeCharts', e)
      }
    }
  },
  data: () => ({
    showCharts: false
  }),
  watch: {},
  created() {
    // console.log(this.form)
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.data-analy-box {
  display: flex;
  .detail-box {
    // margin: 5px;
    // height: 381px;
    padding: 10px;
    // padding-bottom: 40px;
    min-width: 150px;
    max-width: 250px;
    font-size: 14px;
    border: 1px solid #ebeef5;
    display: flex;
    white-space: nowrap;
    flex-flow: column;
    justify-content: space-between;
    // > div:not(:first-child) {
    //   margin-top: 8px;
    // }
    > div {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;

      > span:last-child {
        text-align: center;
        flex: 1;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      > span:first-child {
        text-align: right;
        margin-right: 18px;
        min-width: 60px;
        font-weight: 700;
      }
    }
    > div:nth-child(3n + 2) {
      // margin-bottom: 8px;
    }
    > div:last-child {
      margin-bottom: 0;
    }
    // > div:first-child {
    //   width: 100%;
    //   overflow: hidden;
    //   text-overflow:ellipsis;
    //   white-space: nowrap;
    //   font-size: 16px;
    //   font-weight: 900;
    //   margin-bottom: 8px;

    // }
  }
}
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 5px;
}
.line_chart {
  background: #f6f5fa;
  min-width: 280px;
  padding: 3px;
}

.close-icon {
  position: relative;
  width: 0;
  > i {
    color: #fff;
    position: absolute;
    right: 33px;
    top: -26px;
    font-size: 15px;
    cursor: pointer;
  }
}
</style>
